{% extends 'window.twig' %}
{% block style %}
    <style type="text/css">
        .tab-wrapper{border-bottom: solid 4px #002a80;overflow: hidden;padding-left: 15px;}
        .tab-wrapper .tab-item{
            display: block;
            float:left;
            width: 100px;
            text-align: center;
            padding: 5px 0;
            text-decoration: none;
        }
        .tab-wrapper a:hover{
            background: #1b4d80;
            color:#fff;
        }
        .tab-wrapper .current{
            background: #002a80;
            color:#fff;
        }

    </style>
{% endblock %}
{% block body %}
    <div class="tab-wrapper">
        <a class="tab-item {{ taskStatus == -1 ? 'current':'' }}" href="?taskStatus=-1">所有咨询</a>
        {% for state,tsl in task_state_list %}
            <a class="tab-item {{ taskStatus == state ? 'current':'' }}" href="?taskStatus={{ state }}">{{ tsl }}咨询</a>
        {% endfor %}
    </div>
    <div class="admin-main-container">
        <div class="clearfix btn-control" style="padding: 10px 0 0">
            <form action="task.list" method="get" id="frmSearch">
                <input type="hidden" name="taskStatus" value="{{ taskStatus }}"/>
                <div class="form-inline">
                    <table style="width: 100%;  margin: 0 15px;">
                        <tr>
                            <td style="width: 370px;">
                                <div class="input-group form-inline" style="width: 310px;margin: 5px 0;">
                                    <div class="input-group-addon">创建时间</div>
                                    <input class="datetime form-control" type="text" class="form-control" name="start_date" style="width: 125px;"
                                           date-max="#F{$dp.$D('search_date_end')||'%y-%M-%d'}" id="search_date_start" placeholder="开始时间" />
                                    <div class="input-group-addon" style="border-left: none;border-right: none;">-</div>
                                    <input class="datetime form-control" type="text" class="form-control" name="end_date" style="width: 125px;"
                                           date-min="#F{$dp.$D('search_date_start')}" date-max="%y-%M-%d" id="search_date_end" placeholder="结束时间"/>
                                </div>
                            </td>
                            <td style="width: 225px;" class="{{ UserPermission('Setup_Task') }}">
                                <div class="input-group{{ UserPermission('Setup_Task') }}">
                                    <div class="input-group-addon">分配状态&nbsp;&nbsp;&nbsp;</div>
                                    <select class="form-control" name='distributionStatus' style="width: 120px;">
                                        <option value="-1">所有</option>
                                        <option value="1">已分配</option>
                                        <option value="0">未分配</option>
                                    </select>
                                </div>
                            </td>
                            <td style="width: 260px;">
                                <div class="input-group">
                                    <div class="input-group-addon">关键字搜索</div>
                                    <input type="text" name="search_key" class="search-input form-control" value=""
                                           placeholder="任务关键字" style="width: 150px;">
                                </div>
                            </td>
                            <td>
                                <button class="btn btn-default" type="submit" id="search"><i
                                            class="glyphicon glyphicon-search"></i> 搜  索</button>

                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="input-group form-inline" style="width: 310px;margin: 5px 0;">
                                    <div class="input-group-addon">更新时间</div>
                                    <input class="datetime form-control" type="text" class="form-control" name="update_date_start" style="width: 125px;"
                                           date-max="#F{$dp.$D('update_date_end')||'%y-%M-%d'}" id="update_date_start" placeholder="开始时间" />
                                    <div class="input-group-addon" style="border-left: none;border-right: none;">-</div>
                                    <input class="datetime form-control" type="text" class="form-control" name="update_date_end" style="width: 125px;"
                                           date-min="#F{$dp.$D('update_date_start')}" date-max="%y-%M-%d" id="update_date_end" placeholder="结束时间"/>
                                </div>
                            </td>
                            <td class="{{ UserPermission('Setup_Task') }}">
                                <div class="input-group{{ UserPermission('Setup_Task') }}">
                                    <div class="input-group-addon">咨询等级&nbsp;&nbsp;&nbsp;</div>
                                    <select class="form-control task_state_change" name="task_level1" style="width: 120px;">
                                        <option value="-1">所有</option>
                                        <option value="1"{{ task_data.task_state == 1?' selected="selected"':''}}>1级</option>
                                        <option value="2"{{ task_data.task_state == 2?' selected="selected"':''}}>2级</option>
                                        <option value="3"{{ task_data.task_state == 3?' selected="selected"':''}}>3级</option>
                                        <option value="4"{{ task_data.task_state == 4?' selected="selected"':''}}>4级</option>
                                    </select>
                                </div>
                            </td>
                            <td >
                                <div class="input-group">
                                    <div class="input-group-addon">网咨等级&nbsp;&nbsp;&nbsp;</div>
                                    <select class="form-control task_state_change" name="task_level" style="width: 152px;">
                                        <option value="-1">所有</option>
                                        <option value="1"{{ task_data.task_state == 1?' selected="selected"':''}}>1级</option>
                                        <option value="2"{{ task_data.task_state == 2?' selected="selected"':''}}>2级</option>
                                        <option value="3"{{ task_data.task_state == 3?' selected="selected"':''}}>3级</option>
                                        <option value="4"{{ task_data.task_state == 4?' selected="selected"':''}}>4级</option>
                                    </select>
                                </div>
                            </td>
                            <td>

                                <a class="btn btn-info setup-task-list{{ UserPermission('Setup_Task_List') }}"
                                   href="task.setup.user?task=" data-target="user.select">批量分配</a>

                                <a class="btn btn-info setup-task-list temp-task-list{{ UserPermission('SetTempUserForTask_List') }}"
                                   href="task.temp.user?task="data-target="user.select?show_more_date=date">批量临时转交</a>
                            </td>
                        </tr>
                    </table>
                </div>

            </form>
        </div>
        <div id="ajax_block" load-model="ajax" load-url="task.list?taskStatus={{ taskStatus }}">
            {% include 'block/taskList.twig' %}
        </div>
    </div>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        $(function(){
            location.href='#_r_b';
            var _task_timer = null;
            var _task_time = 20;//fresh seconds(unit:s)
            var refreshTask = function(){// auto refresh page
                var block = $('#ajax_block');
                if(block.attr('load-url')){
                    block.ajaxLoadByPage(block.attr('load-url'),function(){
                        _task_timer = setTimeout(refreshTask,_task_time * 1000);
                    });
                }else{
                    _task_timer = setTimeout(refreshTask,_task_time * 1000);
                }

            };
            $('#frmSearch').submit(function(){
                var url = $(this).attr('action');
                url += "?" + $(this).serialize();
                if(_task_timer != null) clearTimeout(_task_timer);
                $('#ajax_block').ajaxLoadByPage(url);
                _task_timer = setTimeout(refreshTask,_task_time * 1000);
                return false;
            });
            _task_timer = setTimeout(refreshTask,_task_time * 1000);
            util.resize(window,1150);
            /**
             *
             * @param userList 用户选择界面
             * @param callback 回调
             * @returns {boolean}
             */
            var selectUser = function(userList,callback){
                var opts = {
                    type: 2,
                    fix: false, //不固定
                    area: ['300px', '120px'],
                    topIndex:9999,
                    maxmin: false,
                    shade:[0.8, '#393D49'],
                    offset:'tc',
                    content:userList,
                    title:'选择用户',
                    end:function(tag){
                        if(tag && tag['uid'].length > 0){
                            if(tag['uid'].length > 1) {
                                layer.msg('只能将任务分配给1个用户')
                                return false;
                            }
                            callback.call(this,tag);
                        }else{
//                            layer.msg('没有选择用户');
                        }
                    }
                }
                layer.open(opts);
                return false;
            };
            var setupTask = function(url,uid){
                $.post(url,{uid:uid},function(json){
                    if(json['code'] == 0){
                        layer.msg('分配任务成功',{time:1000});
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }else{
                        layer.msg(json['msg'],{time:1000});
                    }
                },'json').error(function(){
                            alert('分配任务失败,请重试');
                        });
            };
            var setTempUser = function(url,data){
                $.post(url,data,function(json){
                    if(json['code'] == 0){
                        layer.msg('转交任务成功',{time:1000});
                        setTimeout(function () {
                            location.reload();
                        }, 1000);
                    }else{
                        layer.msg(json['msg'],{time:1000});
                    }
                },'json').error(function(){
                            alert('转交任务失败,请重试');
                        });
            };
            $('#ajax_block').on('click',function(e){
                var me = $(e.target);
                if(me.hasClass('setup')){
                    var url = me.attr('href');
                    selectUser(me.attr('data-target'),function(data){
                        setupTask(url,data['uid'][0]);
                    });
                    return false;
                }else if(me.hasClass('setup-temp')){
                    var url = me.attr('href');
                    selectUser(me.attr('data-target'),function(data){
                        setTempUser(url,{
                            uid:data['uid'][0],
                            expDate:data['datetime']
                        })
                    });
                    return false;
                }
            });
            $('.setup-task-list').on('click',function(){
                var ids = $('.ids:checked');
                var _this = $(this);
                if(ids.length < 1){
                    var msg = '请选择要' + (_this.hasClass('temp-task-list')?'转交':'分配') + '的任务';
                    layer.msg(msg);
                    return false;
                }
                var me = $(this);
                var tidS = ids.map(function(){return this.value;})
                var url = me.attr('href') + tidS.get().join(',');
                selectUser(me.attr('data-target'),function(data){
                    if(_this.hasClass('temp-task-list')){//转交
                        setTempUser(url,{
                            uid:data['uid'][0],
                            expDate:data['datetime']
                        })
                    }else{//分配
                        setupTask(url,data['uid'][0]);
                    }
                });
                return false;
            });
        });
    </script>
{% endblock %}